<!--
 * @Author: wangming
 * @Date: 2021-04-08 10:48:10
 * @LastEditors: wangming
 * @LastEditTime: 2021-12-14 15:58:04
 * @Description: 列表查询组件
-->
<template>
  <div class="layoutbox pt10 pl10 pr10" v-if="!independentAdvancedSearch">
    <el-row :gutter="12" class="mb10">
      <template v-for="(i, index) in columnList">
        <el-col
          :span="8"
          class="mb10"
          :key="i.code"
          v-if="index < 6 || showHeader"
          @click.native.stop="checked(i)"
        >
          <div class="flex mb10">
            <span class="g3 f12 mr12 label text-ellipsis" :title="i.title">
              {{ i.title }}
            </span>
            <el-input
              class="item"
              :placeholder="i.placeholder"
              size="small"
              style="width: auto"
              v-model="searchData[i.code]"
            >
            </el-input>
          </div>
        </el-col>
      </template>
      <!-- <div class="flex nowrap"> -->
      <div class="mr15" v-if="columnList.length > 6">
        <el-button type="text" @click.stop="showHeader = !showHeader">
          <template v-if="!showHeader">
            更多条件 <i class="el-icon-arrow-down"></i
          ></template>
          <template v-else> 收起 <i class="el-icon-arrow-up"></i></template>
        </el-button>
      </div>
      <div class="search_btn pb10" :style="{ 'text-align': searchBtnPos }">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <!-- </div> -->
    </el-row>
  </div>
  <SearchDesign v-else :config="advancedSearchConfig" />
</template>
<script>
import SearchDesign from "../../hlSearch/index";
export default {
  components: {
    SearchDesign,
  },
  computed: {
    columnList() {
      return this.column.filter((i) => i.showSearch);
    },
  },
  props: {
    independentAdvancedSearch: {
      type: [String, Object],
      default: () => undefined,
    },
    advancedSearchConfig: {
      type: Object,
      default: () => {},
    },
    searchBtnPos: {
      type: String,
      default: () => "",
    },
    column: {
      type: Array,
      default: () => [],
    },
    searchData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      showHeader: false,
    };
  },
  methods: {
    search() {
      this.$emit("search");
    },
    handleReset() {
      for (let i in this.searchData) {
        this.searchData[i] = "";
      }
      this.$emit("search");
    },
    checked(value) {
      this.$emit("inClick", value);
    },
  },
};
</script>

<style lang="scss" scoped>
.layoutbox {
  > .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  .search_btn {
    flex: 1 1 auto;
  }
}
.active {
  color: #409eff;
  font-weight: bold;
}
.text-ellipsis {
  display: inline-block;
  text-overflow: ellipsis;
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
}
.flex {
  display: flex;
  height: 24px;
  .label {
    line-height: 32px;
    height: 32px;
    flex: 0 0 auto;
  }
  .item {
    flex: 1 1 auto;
  }
}
</style>
